import styles from "./index.module.scss";
import {
  HomeFilled,
  DownOutlined,
  TagsFilled,
  SmileFilled,
  AppstoreFilled,
  MessageFilled,
  PieChartFilled,
} from "@ant-design/icons";
import { IMenuItem } from "@/constants/type";
import { Dropdown, MenuProps, Input } from "antd";
// 搜索框 loading
const { Search } = Input;

//先写死数据
const items: MenuProps["items"] = [
  {
    label: "React",
    key: "1",
  },
  {
    label: "React",
    key: "2",
  },
  {
    label: "React",
    key: "3",
  },
];

// 导航栏所有菜单信息
const Menus: IMenuItem[] = [
  { Icon: <HomeFilled />, text: "首页" },
  {
    Icon: <AppstoreFilled />,
    text: "分类",
  },
  { Icon: <TagsFilled />, text: "友人链" },
  { Icon: <SmileFilled />, text: "关于我" },
  { Icon: <MessageFilled />, text: "动态" },
  { Icon: <PieChartFilled />, text: "访客地图" },
];

// 点击下拉菜单选项的触发事件
const handleMenuClick: MenuProps["onClick"] = (e) => {
  console.log("click", e);
};

// 下拉菜单参数
const menuProps = {
  items,
  onClick: handleMenuClick,
};

// 单个菜单组件
const MenuItem: React.FC<IMenuItem> = (props) => {
  return (
    <div className={styles.menu}>
      {props.Icon}
      <span>{props.text}</span>
    </div>
  );
};

// 顶部导航栏
const Nav: React.FC = () => {
  return (
    <div className={styles.nav}>
      <div className={styles.leftArea}>
        {Menus.map((item, _) => {
          if (item.text === "分类")
            return (
              <Dropdown menu={menuProps} key={item.text}>
                <div className={styles.menu}>
                  {item.Icon}
                  <span>{item.text}</span>
                  <DownOutlined />
                </div>
              </Dropdown>
            );
          return <MenuItem Icon={item.Icon} text={item.text} key={item.text} />;
        })}
      </div>
      <div className={styles.rightArea}>
        <Search
          placeholder="search..."
          loading
          size="large"
          className={styles.search}
        />
      </div>
    </div>
  );
};

export default Nav;
